<template>
	<view>
		<view class="cart_box">
			<u-notice-bar :text="text" mode="closable" speed="50" direction="column"></u-notice-bar>
			<view v-show="cart_list.length < 1">
				<u-empty
					mode="car"
					icon="http://cdn.uviewui.com/uview/empty/car.png"
					height="100vh"
					width="100vw"
				>
				</u-empty>
			</view>
			
			<block v-for="(item, i) in cart_list" :key="i">
				 <u-swipe-action>
					<u-swipe-action-item :options="options" :threshold="100" :autoClose="true" @click="deleteGoods(item.goods_id)">
						<view class="swipe-action u-border-top u-border-bottom">
						  <view class="swipe-action__content">
							<view class="cart_item">
								<!-- 选中框 -->
								<view class="item_check">
									<label>
										<checkbox value="item.goods_state" :checked="item.goods_state" @click="isCheck(item)"/>
									</label>
								</view>
								<!-- 左侧小图 -->
								<view class="left_img_box">
									<image :src="item.goods_small_logo" mode="widthFix"></image>
								</view>
								<!-- 右侧内容 -->
								<view class="right_content">
									<view class="tit">
										{{item.goods_name}}
									</view>
									<view class="price">
										<text class="price_num">￥{{item.goods_price}}</text>
											<u-number-box v-model="item.goods_count" @change="valChange(item,$event)"
												button-size="40"
												color="#000000"
												bgColor="#eee"
												iconStyle="color: #000000"></u-number-box>
									</view>
								</view>
							</view>
						  </view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</block>
			<my_settle></my_settle>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	
	export default {
		computed: {
			...mapState('m_cart', ['cart'])
		},
		data() {
			return {
				cart_list:[],
				goods: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000'
					}
				}],
				text: ['左滑即可删除商品','2023年12月20日21:19--done cart']
			}
		},
		onLoad() {
			this.cart_list = this.cart
		},
		methods: {
			...mapMutations('m_cart', ['updataGoodsState','addToCart','deleteCartGoods']),
			valChange(item,event) {
				this.goods.goods_id = item.goods_id
				this.goods.goods_sum = +event.value
				console.log('change', event.value);
				this.addToCart(this.goods)
			},
			isCheck(event) {
				this.goods.goods_id = event.goods_id
				this.goods.goods_state = !event.goods_state
				this.updataGoodsState(this.goods)
			},
			deleteGoods(e){
				console.log(e);
				this.deleteCartGoods(e)
				this.cart_list = this.cart
			}
		}
	}
</script>

<style lang="scss">
	.u-swipe-action{
		margin-bottom: 15px;
	}
	.swipe-action__content {
		background-color: #ffffff; 
	}
	page{background-color: #f3f3f3;}
	.cart_box{
		.cart_item{
			// border-radius: 15px;
			padding: 10px 0;
			// margin-bottom: 10px;
			display: flex;
			// background-color: #ffffff;
			.item_check{
				width: 10%;
				// border: 1px solid red;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.left_img_box{
				// border: 1px solid red;
				width: 30%;
				image{
					width: 100%;
					border-radius: 20px;
				}
			}
			.right_content{
				width: 60%;
				padding: 0 10px;
				// border: 1px solid red;
				position: relative;
				.tit{
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3; /* 这里是超出几行省略 */
					overflow: hidden;
				}
				.price{
					display: flex;
					justify-content: space-around;
					align-items: center;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					.price_num{
						color: #ff0004;
						font-weight: bold;
						font-size: 18px;
					}
				}
			}
		}
	}
</style>
